<template>
  <div class = "loginFrame">
    <div class="login-our">
      <img class = "login-logo" src="../../../assets/img/bumblebee.png">
      <p class="login-our-info">移动会议让生活更简单</p>
    </div>
  <el-form ref = "AccountForm" :model = "account"   rules = "rules" label-position = "left" label-width = "0px" class = "demo-ruleForm login-container">
    <!--tab标签-->
    <el-tabs v-model = "activeName" @tab-click = "handleClick" type="card" class = "users">
      <el-tab-pane label = "登录" name = "login">
      </el-tab-pane>
      <el-tab-pane label = "注册" name = "register"></el-tab-pane>
    </el-tabs>
    <div class="login-show" v-show="showLogin">
    <el-form-item prop = "userphonr">
    <el-input type = "text" v-model = "account.userphone" auto-complete = "off" placeholder = "请输入您的手机账号"></el-input></el-form-item>
    <el-form-item prop = "password">
    <el-input type = "password" v-model = "account.password" auto-complete = "off" placeholder = "请输入密码"></el-input>
    </el-form-item>
      <div class = "remFor"><el-checkbox v-model = "checked" checked class = "remember">记住密码</el-checkbox>
        <a href ="'https://blog.csdn.net/Vanadis_outlook/article/details/72823024.html'" class = "forget">忘记密码？</a>
      </div>
      <el-form-item style = "width:100%;">
        <el-button type = "primary" style = "width:100%;" v-on:click="login">登录</el-button></el-form-item>
    </div>
    <div class="login-show" v-show="showRegister">
      <el-form-item prop = "userphone">
        <el-input type = "text" v-model = "account_userphone" auto-complete = "off" placeholder = "请输入您注册手机账号"></el-input></el-form-item>
      <el-form-item prop = "username">
        <el-input type = "text" v-model = "account_username" auto-complete = "off" placeholder = "请输入您昵称"></el-input></el-form-item>
      <el-form-item prop = "password">
        <el-input type = "password" v-model = "account_password" auto-complete = "off" placeholder = "请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop = "password">
        <el-input type = "password" v-model = "account_password2" auto-complete = "off" placeholder = "请再次输入密码"></el-input>
      </el-form-item>
      <el-form-item style = "width:100%;">
        <el-button type = "primary" style = "width:100%;" v-on:click="register">点击注册</el-button></el-form-item>
    </div>
    </el-form>
  </div>
</template>
<script>
import {setCookie, getCookie} from '../../../assets/js/cookie.js'
export default {
  name: 'Login',
  mounted () {
    if (getCookie('username')) {
      this.$router.push('/index')
    }
  },
  data () {
    return {
      logining: false,
      showLogin: true,
      showRegister: false,
      activeName: 'login',
      account: {
        userphone: '',
        password: ''
      },
      account_userphone:'',
      account_username:'',
      account_password:'',
      account_password2:'',
      rules: {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
      },
      checked: true
    }
  },
  methods: {
    login () {
      var url = '/api/user/login'
      var urlrsa = '/RSA/getPublicKey'
      if (this.account.new_phone === '' || this.account.username === '') {
        alert('请输入用户名或密码')
      } else {
        this.$axios.get(urlrsa).then((response) => {
          var encrypt = new JSEncrypt();
          encrypt.setPublicKey(response.data);
          var new_phone = encrypt.encrypt(this.account.userphone);
          var new_password = encrypt.encrypt(this.account.password);
          this.$axios.post(url, {
            userIphone: new_phone,
            userPassword: new_password
          }).then((response) => {
            if(response.data.code == 1){
              sessionStorage.setItem("userId",response.data.userId)
              sessionStorage.setItem("roomIdList",JSON.stringify(response.data.roomIdList))
              this.$router.push({path: '/index'});
              this.$message({
                message: '登录成功！',
                type: 'success',
                duration:3000,
                onClose: this.handleClick(this.$message)
              })
            }else{
              this.$message.error('登录失败');
            }
            /*setCookie('username', this.account.username, 1000)
            setTimeout(function () {
              this.$router.push('/index')
            }.bind(this), 1000)*/
          })
        })
      }
    },
    handleClick () {
      this.showRegister = !this.showRegister
      this.showLogin = !this.showLogin
      if( this.showLogin === true){
        this.activeName = 'login'
      }else{
        this.activeName = 'register'
      }
    },
    register () {
      var url = '/api/user/regist'
      var urlrsa = '/RSA/getPublicKey'
      if(this.account_password != this.account_password2){
        alert('两次密码不一致，请重新输入')
      }else{
        //通过格式验证以后
        //开始发送
        this.$axios.get(urlrsa).then((response)=>{
          var encrypt = new JSEncrypt();
          encrypt.setPublicKey(response.data);
          var new_userphone = encrypt.encrypt(this.account_userphone);
          var new_username = encrypt.encrypt(this.account_username);
          var new_password = encrypt.encrypt(this.account_password2);
          this.$axios.post(url, {
            userIphone: new_userphone,
            userName: new_username,
            userPassword: new_password
          }).then((response) =>{
            if(response.data.code === 0){
              this.$message({
                message: response.data.msg,
                type: 'error',
                duration:3000,
              })
            }
            else{
              this.$message({
                message: '恭喜你，注册成功,请先登录',
                type: 'success',
                duration:3000,
                onClose: this.handleClick(this.$message)
              })
            }
          })
        })
      }
    }
  }
}
</script>
<style scoped>
  body {
    background: beige;
    background-size:100%;
    background-repeat:no-repeat;
    height: 100%;
  }
  .login-logo{
    width: 200px;
    height: 200px;
  }
  .login-our{
    width: 100%;
    text-align: center;
  }
  .login-our-info{
    font-size: .40rem;
    font-family: "Adobe 繁黑體 Std B";
  }
  .remFor{
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .login-container {
    width:90%;
    margin: 0 auto;
    padding-top: 50px;
  }
  .remember{
    width:50%;
    float: left;
  }
  .forget{
    width:50%;
    float: right;
    text-align:right;
    font-size:14px;
    font-family:PingFang SC;
  }
</style>
